<template>
	<view class="pagebody">
		<view class="topbox">
			<view class=" align-center">
				<view class=" flex-row align-center">
					<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
						style="width: 48rpx;height: 48rpx;"></image>
				</view>
				<view class="color303b39 fz40 fwbold" style="margin-left: 263rpx;">
					举报
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 0 0 24rpx;">
			<view class="mt55">
				<view class="color303b39 fz32 fwbold">
					<span style="color: red;margin-right: 8rpx;	">*</span>请选择举报类型
				</view>
				<view class="mt40 flex-wrap flex-row">
					<view v-for="(item,index) in reportlist" :key="index"
						:class="reportform.violationId == item.dictValue?'istype':''"
						@click="reportform.violationId = item.dictValue"
						class="mr16 mb16 color303b39 justify-center align-center fz28"
						style="background: #F6FAFA;width: 224rpx;height: 76rpx;border-radius: 16rpx ;">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 100rpx; padding-right:24rpx;">
				<view class="color303b39 fz32 fwbold">
					请填写举报信息
				</view>
				<textarea class="mt40" v-model="reportform.content" name="" id="" cols="30" rows="10" maxlength="200"
					placeholder-style="color:#7E8987;"
					placeholder="您可以提供详细的举报说明，便于我们更快处理，如:哪部分的文字/图片存在「贬低、歧视他人」的言论。(选填)"
					style="background: #F6FAFA;width: -webkit-fill-available;padding: 24rpx;color: #303b39;"></textarea>
				<view class="mt16 justify-end fz24" style="color: #7E8987;">
					<span style="color: #00D9B2;">{{reportform.content.length}}</span>/200
				</view>

				<view class="align-center loginbtn justify-between">
					<button class="button fwbold" :style="{opacity:reportform.violationId?'1':'0.5'}"
						:disabled="reportform.violationId?false:true" type="primary" @click="submit">立即提交</button>
				</view>
			</view>

		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import AdvCom from '../../layouts/advcome.vue';
	import {
		getDicts,
		addReport
	} from '@/api/api.js'
	export default {
		components: {

		},
		onLoad(options) {
			this.reportform.reportType = options.type
			this.reportform.invitationId = options.tzid
			this.reportform.replyId = options.plid
			this.getTypelist()
		},


		data() {
			return {
				reportlist: [],
				reportform: {
					reportType: null,
					invitationId: null,
					replyId: null,
					violationId: null,
					content: '',
				},
			}
		},
		watch: {},
		created() {},
		methods: {
			getTypelist() {
				getDicts('violation_type').then(res => {
					this.reportlist = res.data
				})

			},
			submit() {
				addReport(this.reportform).then(res => {
					this.$refs.uToast.show({
						title: '感谢您的反馈',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000)

				})
			},
			backpage() {
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('update', {
							msg: '页面更新'
						})
					},

				});
			}

		},

	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;
		background: #FFF;

		.topbox {
			height: 128rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.2) 0%, rgba(0, 217, 178, 0) 100%);
			padding: 20rpx 24rpx;
		}

		.istype {
			background: #E5FBF7 !important;
			color: #00977C;
			font-weight: bold;
		}

		.loginbtn {
			margin-top: 52rpx;

			uni-button {
				border-radius: 98rpx;
				width: 100%;
			}

			uni-button:after {
				border: none;
			}

			.button {
				background-color: #00D9B2;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
			}
		}
	}
</style>